<template>
  <el-drawer
    title="订单详情"
    :visible.sync="isShow"
    :wrapper-closable="!modalDialog"
    size="1000px"
  >
    <div class="property-title">订单信息</div>
    <div class="df_ac">
      <div class="item">
        <span class="key">订单编号：</span>
        <span class="value">{{ detail.orderId }}</span>
      </div>
      <div class="item">
        <span class="key">订单状态：</span>
        <span v-if="detail.payStatus == 0">未支付</span>
        <span v-else-if="detail.payStatus == 1">超时未支付</span>
        <span v-else-if="detail.payStatus == 2">已取消</span>
        <span v-else-if="detail.payStatus == 3">已支付</span>
        <span v-else-if="detail.payStatus == 4">退款中</span>
        <span v-else>已退款</span>
      </div>
      <div class="item">
        <span class="key">创建时间：</span>
        <span class="value">{{ detail.createTime }}</span>
      </div>
      <div class="item">
        <span class="key">支付时间：</span>
        <span class="value">{{ detail.payTime }}</span>
      </div>
      <div class="item">
        <span class="key">订单来源：</span>
        <span class="value">{{ detail.channelType == '01' ? '小程序端' : '场馆端' }}</span>
      </div>
      <div class="item">
        <span class="key">订单金额：</span>
        <span class="value">￥{{ detail.allPrice }}</span>
      </div>
      <div v-if="detail.yhMoney" class="item">
        <span class="key">优惠金额：</span>
        <span class="value">￥{{ detail.yhMoney }}</span>
      </div>
      <div class="item">
        <span class="key">支付方式：</span>
        <span class="value">{{ detail.payMethod || '-' }}</span>
      </div>
      <div v-if="detail.refoundMoney" class="item">
        <span class="key">退款金额：</span>
        <span class="value">￥{{ detail.refoundMoney }}</span>
      </div>
      <div class="item">
        <span class="key">操作员：</span>
        <span class="value">{{ detail.createUserName || '-' }}</span>
      </div>
      <div class="item">
        <span class="key">备注：</span>
        <span class="value">{{ detail.note }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">开票情况</div>
    <div class="df_ac">
      <div>
        <span class="key">开票状态：</span>
        <span class="value">{{ detail.invoiceStatus == '1'?'已开票': "未开取" }}</span>
      </div>
      <div>
        <span class="key">开票时间：</span>
        <span class="value">{{ detail.invoiceTime || "-" }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">买家信息</div>
    <div class="df_ac mt20">
      <div>
        <span class="key">姓名：</span>
        <span class="value">{{ detail.memberName || '-' }}</span>
      </div>
      <div>
        <span class="key">联系电话：</span>
        <span class="value">{{ detail.memberPhone || '-' }}</span>
      </div>
      <div>
        <span class="key">会员卡号：</span>
        <span class="value">{{ detail.numCard || '-' }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <el-table
      :data="detail.detailList"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="商品名称"
        prop="goodsName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="商品分类"
        prop="categoryName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="条形码"
        prop="barCode"
        min-width="120"
        show-overflow-tooltip
      />
      <!-- <el-table-column
          align="center"
          label="规格"
          prop="goodsSkuInfo"
          min-width="120"
          show-overflow-tooltip
        /> -->
      <el-table-column
        align="center"
        label="数量"
        prop="num"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="销售价(元)"
        prop="price"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="小计(元)"
        prop="amount"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="状态"
        prop="amount"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span>{{ statusMap[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="退款类型"
        prop="amount"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.refundType == '0'">退货退款</span>
          <span v-if="scope.row.refundType == '1'">仅退款</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom_wrap">
      <div class="line">
        <span>订单金额：</span>
        <span>{{ detail.allPrice || 0 }}</span>
        <span>元</span>
      </div>
      <template v-if="detail.detailMoneyRespParam">
        <div v-if="detail.detailMoneyRespParam.memberDiscount" class="line">
          <span>会员折扣：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.memberDiscount || 0 }}</span>
          <span>元</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.marketingPolicy" class="line">
          <span>营销政策：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.marketingPolicy || 0 }}</span>
          <span>元</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.groupBuyCoupon" class="line">
          <span>团购券：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.groupBuyCoupon || 0 }}</span>
          <span>元</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.discountCoupon" class="line">
          <span>优惠券：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.discountCoupon || 0 }}</span>
          <span>元</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.integral" class="line">
          <span>积分抵扣：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.integral || 0 }}</span>
          <span>元</span>
        </div>
      </template>
      <div v-if="detail.realPrice" class="line secondColor">
        <span>实付款：</span>
        <span>{{ detail.realPrice }}</span>
        <span>元</span>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import store from '@/store'
import { goodsOrderDetail } from '@/api'
export default {
  data() {
    return {
      isShow: false,
      detail: {},
      statusMap: {
        '0': '待支付',
        '1': '超时未支付',
        '2': '取消支付',
        '3': '支付成功',
        '4': '退款中',
        '5': '退款成功'
      },
      modalDialog: store.getters.dialog
    }
  },
  methods: {
    getOrderDetail(id) {
      goodsOrderDetail({ param: { id }}).then(res => {
        this.detail = { ...res.record }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
  color: #666666;
  display: inline-block;
  // width: 90px;
  // text-align: right;
}
.value {
  color: #222;
}
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
